<template>
	<view class="container">
		<view class="header">
			选择考试类型
		</view>
		<view class="title">
			无人机机型
		</view>
		<view class="select-box1">
			<view v-for="(item,index) in droneTypes" :key="index"
				:class="item.checked?'select-item select':'select-item'" @tap="select1(item)">
				<image :src="item.icon" mode="" :class="(index==1||index==3)?'icon1':'icon2'"></image>
				<view class="">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="title">
			执照类型
		</view>
		<view class="select-box2">
			<view v-for="(item,index) in idTypes" :key="index" :class="item.checked?'select-item select':'select-item'"
				@tap="select2(item)">
				<view class="">
					{{item.name}}
				</view>
			</view>
		</view>
		<view :class="isSubmit?'btn active':'btn'" @tap="finish">
			完成
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		unref,
		toRaw,
		toRefs,
		nextTick,
		computed
	} from 'vue'
	import {
		onInit,
		onLoad,
		onReady,
		onShow,
		onHide,
		onUnload,
		onResize,
		onPullDownRefresh,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		$http,
		toLogin,
		usePaginatedList
	} from "@/common"
	const droneTypes = ref([{
			name: '多旋翼无人机',
			icon: 'https://q-api.lanbeiduo.com/api/file/download/4plp9H6Wa9_无人机.png',
			checked: true
		},
		{
			name: '固定翼无人机',
			icon: 'https://q-api.lanbeiduo.com/api/file/download/2HJHyFmtH8_icons8-prop_plane.png',
			checked: false
		},
		{
			name: '垂直起降无人机',
			icon: 'https://q-api.lanbeiduo.com/api/file/download/i1xSFpsBaP_icon_UAV1.png',
			checked: false
		},
		{
			name: '无人直升机',
			icon: 'https://q-api.lanbeiduo.com/api/file/download/zusAX8JIVg_im-chopper.png',
			checked: false
		}
	])
	const idTypes = ref([{
			name: '视距内驾驶员',
			checked: true
		},
		{
			name: '超视距驾驶员',
			checked: false,
		},
		{
			name: '无人机驾驶员',
			checked: false
		}
	])
	const isSubmit = computed(() => {
		return droneTypes.value.some(m => m.checked) && idTypes.value.some(n => n.checked)
	})
	onLoad(() => {
		if (uni.getStorageSync('droneTypes')) {
			droneTypes.value = JSON.parse(uni.getStorageSync('droneTypes'))
		}
		if (uni.getStorageSync('idTypes')) {
			idTypes.value = JSON.parse(uni.getStorageSync('idTypes'))
		}
	})
	onShow(() => {

	})

	function select1(item) {
		droneTypes.value.forEach(m => {
			m.checked = false
		})
		item.checked = true
	}

	function select2(item) {
		idTypes.value.forEach(m => {
			m.checked = false
		})
		item.checked = true
	}

	function finish() {
		uni.setStorageSync('droneTypes', JSON.stringify(droneTypes.value))
		uni.setStorageSync('idTypes', JSON.stringify(idTypes.value))
		if (!isSubmit.value) {
			return
		}
		uni.switchTab({
			url: '/pages/home/index'
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100%;
		background: linear-gradient(to bottom, #EFF9FE, #F9F9F9);

		.header {
			padding: 30rpx 20rpx 36rpx 20rpx;
			font-size: 40rpx;
			font-weight: bold;
		}

		.title {
			font-size: 32rpx;
			color: #696969;
			margin-left: 20rpx;
		}

		.select-box1 {
			padding: 30rpx 20rpx;
			display: flex;
			flex-wrap: wrap;

			.select-item {
				background-color: #fff;
				width: 46%;
				padding: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 0 2% 30rpx 2%;
				border-radius: 16rpx;
				border: 6rpx solid #fff;
				color: #778899;

				.icon2 {
					width: 250rpx;
					height: 120rpx;
					margin-bottom: 20rpx;
				}
				.icon1 {
					width: 200rpx;
					height: 120rpx;
					margin-bottom: 20rpx;
				}
			}

			.select {
				border: 6rpx solid #1867E8;
			}
		}

		.select-box2 {
			padding: 30rpx 20rpx;
			display: flex;
			flex-wrap: wrap;

			.select-item {
				background-color: #fff;
				width: 46%;
				padding: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 0 2% 30rpx 2%;
				border-radius: 16rpx;
				border: 6rpx solid #fff;
				color: #778899;
			}

			.select {
				border: 6rpx solid #1867E8;
			}
		}

		.btn {
			position: fixed;
			bottom: 80rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 600rpx;
			height: 70rpx;
			border-radius: 35rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			background-color: #D9D9D9;
			font-size: 32rpx;
		}

		.active {
			background-color: #1867E8;
		}
	}
</style>